<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript" src="../jquery-1.11.3.js"></script>
        

        <link href="./11.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">
        function f1(){
            //jquery的css方法获得样式，"行内、内部、外部" 样式均可以获得
            // 普通的dom方式只可以获得 行内 样式
            console.log($('div').css('width'));//行内样式
            console.log($('div').css('height'));
            console.log($('div').css('background-color'));
            console.log($('div').css('color'));//内部样式
            console.log($('div').css('font-size'));//外部样式

            //当前jquery1.4.4版本不能直接操作"复合属性"样式，需要变为具体样式操作
            //
            //例如：border----->border-left(top/right/bottom)-style  border-left-color border-left-width
            //      margin----->margin-left/top/right/bottom
            //      padding----->padding-left/top/right/bottom
            //      background----->background-color/image
            //console.log($('div').css('border'));//空字符串
            console.log($('div').css('border-top-color'));//rgb(0, 0, 255)
            console.log($('div').css('border-top-width'));//4px
            console.log($('div').css('border-top-style'));//solid
            //document.getElementsByTagName('div')[0].style.width
        }
        function f2(){
            //有就更改，没有就添加
            //均设置为“行内”样式
            $('div').css('width','300px');
            $('div').css('background-color','lightgreen');
            
            //把 复合样式 变为 具体样式 可以设置
            $('div').css('border-right-color','red');
            $('div').css('border-right-width','10px');
        }
        function f3(){
            //批量设置css
            var jn = {width:'400px', height:'300px'}
            $('div').css(jn);
        }
        </script>
        <style type="text/css">
        	div{color:red; border:4px solid blue;}
        </style>
    </head>
    <body>
        <h1>css样式快捷操作</h1>
        
        <div class="apple" style="width:200px; height:150px; background-color:lightblue;">this is jquery subject</div>

        <input type="button" value="获取" onclick="f1()" />
        <input type="button" value="设置" onclick="f2()" />
        <input type="button" value="批量设置" onclick="f3()" />
    </body>
</html>